<!--
 * @Autor: dingxiaolin
 * @Date: 2021-06-15 08:56:27
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-07-29 16:13:31
-->
<template>
    <a-card :bordered="false">
        <!-- 按钮组 -->
        <div class="table-operator">
            <a-button type="primary" @click="visible = true" v-if="showSearch">
                <template #icon><SearchOutlined /></template>查询</a-button
            >
            <!-- <a-button @click="$emit('reset')">重置</a-button> -->
            <slot name="button"></slot>
        </div>
        <a-modal v-model:visible="visible" title="查询" @ok="$emit('search'), (visible = false)">
            <div class="table-page-search-wrapper">
                <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-row :gutter="[10, 0]">
                        <!-- default form modal -->
                        <slot name="default"></slot>
                    </a-row>
                </a-form>
            </div>
        </a-modal>
    </a-card>
</template>

<script lang='ts'>
import { defineComponent, PropType, reactive, toRefs, ref, computed, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/store'
export default defineComponent({
    name: 'searchPanel',
    components: {},
    props: {
        showSearch: {
            type: Boolean,
            default: true
        }
    },
    emits: [],
    setup(props, ctx) {
        const router = useRouter()
        const store = useStore()
        const state = reactive({
            visible: false,
            queryParam: {}
        })
        onMounted(() => {})
        // /**
        //  * 查询
        //  */
        // const search = () => {
        //     state.visible = false
        // }
        return {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 18 }
            },
            ...toRefs(state)
        }
    }
})
</script>

<style lang='scss' scoped>
:deep(.ant-form-item) {
    margin-bottom: 15px;
}
.table-operator {
    margin: 0;
    .ant-btn {
        margin-right: 8px;
    }
}
:deep(.ant-card-body) {
    padding: 10px;
    display: flex;
    // align-items: flex-end;
    justify-content: flex-end;
}
</style>
